<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="csrf-token" content="{{ csrf_token() }}">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>电话咨询查询</title>
	<link rel="stylesheet" href="{{URL::asset('vendor/laravel-admin/font-awesome/css/font-awesome.min.css')}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/laravel-admin/font-awesome/css/font-awesome.min.css')}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/index.css')}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/reset.style.css')}}">
	<script src="{{URL::asset('js/jquery.min.js')}}"></script>
	<script src="{{URL::asset('vendor/element-ui/ext/vue.js')}}"></script>
	<script src="{{URL::asset('vendor/element-ui/lib/index.js')}}"></script>
	<style media="screen">
		#main .el-card-box {
			margin:0 auto;width:50%;margin-top: 100px;
		}
		@media screen and (max-width: 690px) {
		    #main .el-card-box {
		        width:94%;
		    }
		}
		@media screen and (min-width: 1100px) {
		    #main .el-card-box {
		        width:36%;
		    }
		}
		@media screen and (min-width: 1366px) {
		    #main .el-card-box {
		        width:26%;
		    }
		}
		@media screen and (min-width: 1500px) {
		    #main .el-card-box {
		        width:22%;
		    }
		}
	</style>
</head>
<body style="background-color:#F3F3F4;">
<div id="main">
	<el-card class="el-card-box">
		<div slot="header" class="el-card-header">
			<h3 align="center">
				请输入报名预留电话号码
			</h3>
		</div>
		<div class="el-card-body" @keydown="kdSearch($event)">
			<p align="center">
				<el-input align="center" v-model="phone_number"
					placeholder="请输入报名预留电话号码" autofocus>
				</el-input>
			</p>
			<p align="center">
				<el-button type="primary" icon="el-icon-search"
					@click="doSearch">
					查询
				</el-button>
			</p>
		</div>
	</el-card>


	<el-dialog title="选择学生" :visible.sync="show_confirm_table">
		<el-table :data="confirm_table_data">
			<el-table-column align="center" property="name" label="姓名"></el-table-column>
			<el-table-column align="center" property="sex" label="性别"></el-table-column>
			<el-table-column align="center" property="age" label="年龄"></el-table-column>
			<el-table-column align="center" property="step" label="阶段"></el-table-column>
			<el-table-column align="center" property="status" label="状态"></el-table-column>
			<el-table-column align="center" property="enroll_time" label="入学时间"></el-table-column>
			<el-table-column align="center" label="选择">
				<template slot-scope="scope">
					<el-button type="primary" plain circle size="mini"
						icon="el-icon-check" @click="chooseST(scope.row)">
					</el-button>
	  			</template>
			</el-table-column>
		</el-table>
		<span slot="footer" class="dialog-footer">
			<el-button type="primary" icon="fa fa-users"
			 	@click="showAllSt" size="small">
				其他学生
			</el-button>
			<el-button type="success" icon="el-icon-circle-plus"
			 	@click="addNewSt" size="small">
				新增学生
			</el-button>
		</span>
	</el-dialog>

	<el-dialog title="绑定学生" :visible.sync="show_bind_table">
		<el-table :data="bind_table_data">
			<el-table-column align="center" property="name" label="姓名"></el-table-column>
			<el-table-column align="center" property="sex" label="性别"></el-table-column>
			<el-table-column align="center" property="age" label="年龄"></el-table-column>
			<el-table-column align="center" property="step" label="阶段"></el-table-column>
			<el-table-column align="center" property="status" label="状态"></el-table-column>
			<el-table-column align="center" property="enroll_time" label="入学时间"></el-table-column>
			<el-table-column align="center" label="绑定">
				<template slot-scope="scope">
					<el-button type="success" plain circle size="mini"
						icon="fa fa-link" @click="bindST(scope.row)">
					</el-button>
	  			</template>
			</el-table-column>
		</el-table>
		<span slot="footer" class="dialog-footer">
			<el-button type="primary" icon="fa fa-users"
			 	@click="showAllSt" size="small">
				其他学生
			</el-button>
			<el-button type="success" icon="el-icon-circle-plus"
			 	@click="addNewSt" size="small">
				新增学生
			</el-button>
		</span>
	</el-dialog>

	<el-dialog title="全体学生" :visible.sync="show_all_table" width="90%">
		<el-form :inline="true" :model="seaForm" class="demo-form-inline">
			<el-form-item>
				<el-input v-model="seaForm.name" placeholder="姓名" size="small" clearable>
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-input v-model="seaForm.primary_phone" placeholder="联系方式" size="small" clearable>
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="small" @click="getAllStData">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="all_table_data" v-loading="all_st_table_loading">
			<el-table-column align="center" property="name" label="姓名"></el-table-column>
			<el-table-column align="center" property="sex" label="性别"></el-table-column>
			<el-table-column align="center" property="age" label="年龄"></el-table-column>
			<el-table-column align="center" property="primary_phone" label="联系方式"></el-table-column>
			<el-table-column align="center" property="primary_parent_name" label="家长姓名"></el-table-column>
			<el-table-column align="center" property="step" label="阶段"></el-table-column>
			<el-table-column align="center" property="status" label="状态"></el-table-column>
			<el-table-column align="center" property="enroll_time" label="入学时间"></el-table-column>
			<el-table-column align="center" label="绑定">
				<template slot-scope="scope">
					<el-button type="success" plain circle size="mini"
						icon="fa fa-link" @click="bindST(scope.row)">
					</el-button>
	  			</template>
			</el-table-column>
		</el-table>
		<el-pagination
			align="right"
			@size-change="pageSizeChange"
			@current-change="curPageChange"
			:current-page="seaForm.page.pageNumber"
			:page-sizes="[10, 25, 50]"
			:page-size="seaForm.page.pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="seaForm.page.total">
		</el-pagination>
	</el-dialog>
</div>
</body>
<script type="text/javascript">
let main = new Vue({
	el:"#main",
	data:{
		phone_number:"",
		show_confirm_table:false,
		confirm_table_data:[],
		show_bind_table:false,
		bind_table_data:[],
		show_all_table:false,
		all_table_data:[],
		all_st_table_loading:false,
		seaForm:{
			_token:"{{csrf_token()}}",
			name:"",primary_phone:"",
			page:{
				pageNumber:1,pageSize:10,total:0
			}
		}
	},
	mounted:function() {
		this.getAllStData();
	},
	methods:{
		kdSearch(e) {
			if(e.keyCode === 13){
				this.doSearch();
			}
		},
		doSearch() {
			let rules = /^[1][1,2,3,4,5,6,7,8,9][0-9]{9}$/;
			if(!rules.test(this.phone_number)){
				this.$notify.error({title:"Error",message:"手机号格式不正确!"});
				return false;
			}
			let url = "{{URL::asset('admin/consultation/phone_consultation/query_phone')}}";
			let param = {
				phone:this.phone_number,
				_token:"{{csrf_token()}}",
			}
			$.post(url,param,function(res) {
				main.ajaxRes(res);
			});
		},
		ajaxRes(res) {
			switch (res.code) {
				case "0":
					this.$notify.error({title:"Error",message:res.msg});
					break;
				case 1:
					this.$confirm(res.msg, '提示-'+res.code, {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						window.location.href = "{{URL::asset('admin/consultation/register')}}?phone="+this.phone_number;
					}).catch(() => {});
					break;
				case 2:
					this.$confirm(res.msg, '提示-'+res.code, {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						window.location.href = 'register?phone='+this.phone_number;
					}).catch(() => {});
					break;
				// case 3:
				// 	this.$confirm(res.msg, '提示-'+res.code, {
				// 		confirmButtonText: '确定',
				// 		cancelButtonText: '取消',
				// 		type: 'warning'
				// 	}).then(() => {
				// 		this.show_bind_table = true;
				// 		this.bind_table_data = res.data;
				// 	}).catch(() => {});
				// 	break;
				case 666:
					this.show_confirm_table = true;
					this.confirm_table_data = res.data;
					break;
			}
		},
		chooseST(row) {
			window.location.href = "{{URL::asset('admin/consultation/register')}}?st_id=" + row.id + "&phone=" + row.primary_phone;
		},
		bindST(row) {
			if(row.primary_phone != this.phone_number){
				this.$confirm("该学生的联系方式为："+row.primary_phone+"，确认修改吗？", '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.doBind(row);
				}).catch(() => {});
			}else{
				this.doBind(row);
			}
		},
		doBind(row) {
			this.all_st_table_loading = true;
			let url = "{{URL::asset('admin/consultation/phone_consultation/bind')}}";
			let param = {
				_token:"{{csrf_token()}}",
				st_info:row,
				phone:this.phone_number
			}
			$.post(url,param,function(res) {
				this.all_st_table_loading = false;
				if(res.code == 1){
					main.show_all_table = false;
					main.show_bind_table = false;
					main.doSearch();
					main.show_confirm_table = true;
					main.$notify({type:'success',title:"Success",message:res.msg});
				}else{
					main.$notify.error({title:"Error",message:res.msg});
				}
			})
		},
		showAllSt() {
			this.show_confirm_table = false;
			this.show_bind_table = false;
			this.show_all_table = true;
			this.getAllStData();
		},
		getAllStData() {
			let url = "{{URL::asset('admin/consultation/phone_consultation/get_all_st_table')}}";
			let param = this.seaForm;
			this.all_st_table_loading = true;
			$.get(url,param,function(res) {
				main.all_st_table_loading = false;
				main.all_table_data = res.data.rows;
				main.seaForm.page.total = res.data.total;
			});
		},
		pageSizeChange(val) {
			this.seaForm.page.pageSize = val;
			this.seaForm.page.pageNumber = 1;
			this.getAllStData();
		},
		curPageChange(val) {
			this.seaForm.page.pageNumber = val;
			this.getAllStData();
		},
		addNewSt() {
			window.location.href = "{{URL::asset('admin/consultation/register')}}?phone=" + this.phone_number;
		}
	}
})
</script>
</html>
